<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/10/30
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        var pageNum;
        var pages;
        $(function () {
            getData(1,10)
        });


        function getData(pnum,psize) {
            $('tbody').empty()
            $.get('city', 'pageNum='+pnum+'&pageSize='+psize, function (res) {
                $.each(res.list, function (i, city) {
                    console.log(city)
                    $('tbody').append(
                        `
                            <tr>
                                <td>\${city.cityId}</td>
                                <td>\${city.aaa}</td>
                                <td>\${city.countryId}</td>
                                <td>\${city.lastUpdate}</td>
                            </tr>
                        `
                    )
                });
                pageNum=res.pageNum
                pages=res.pages
                $('#pageNum').text(res.pageNum)
                $('#pages').text(res.pages)
                $('#nav').empty()
                $.each(res.navigatepageNums, function (i, e) {
                    $('#nav').append(`<a href="#" onclick="return pageChange(\${e})">\${e}</a>`)
                });

            });
        }

        function pageChange(index) {
            if(index>0){
                pageNum=index
            }else{
                switch (index){
                    case -1:
                        pageNum=1
                        break;
                    case -2:
                        pageNum=pageNum-1
                        break;
                    case -3:
                        pageNum=pageNum+1
                        break;
                    case -4:
                        pageNum=pages
                        break;
                }
            }
            getData(pageNum,$('[name=pageSize]').val())
            return false;
        }

        function onChange() {
            getData(pageNum,$('[name=pageSize]').val())
        }
    </script>
    <style>
        a{
            text-decoration: none;
        }
        #nav>a{
            margin-right: 6px;
        }
    </style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
    <thead>
    <tr>
        <th>city_id</th>
        <th>city</th>
        <th>country_id</th>
        <th>last_update</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<div>
    <select name="pageSize" onchange="onChange()">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
    <a href="#" onclick="return pageChange(-1)">首页</a>
    <a href="#" onclick="return pageChange(-2)">上一页</a>
    <span id="nav">

        <a href="#" onclick="return pageChange(2)">2</a>
    </span>
    <a href="#" onclick="return pageChange(-3)">下一页</a>
    <a href="#" onclick="return pageChange(-4)">末页</a>
    <span id="pageNum"></span>/
    <span id="pages"></span>
</div>
</body>
</html>
